<template>
	<div class="safeCenter">
		<HeaderTop :title="`安全中心`"></HeaderTop>
		<div class="safeCenter-content">
			<div class="safeCenter-content-title">
				<img src="../../../static/images/agent-safeCenter-warnning.png" alt="" class="safeCenter-content-title-left">
				<div class="safeCenter-content-title-right">为了确保您的账号安全，请您填写相关安全信息，以备不时之需</div>
			</div>
			<div class="safeCenter-content-list">
				<div class="safeCenter-content-list-top">
					<div class="line1">
						<div class="left">登录密码</div>
                        <van-icon class="right" name="lock" color="#1989fa" size="26"/>
					</div>
					<div class="line2">修改登录时的密码，定期修改有利于账户安全</div>
				</div>
				<div class="safeCenter-content-list-bottom" @click="toPush(1)">管理</div>
			</div>
			<div class="safeCenter-content-list">
				<div class="safeCenter-content-list-top">
					<div class="line1">
						<div class="left">手机号码</div>
                        <van-icon class="right" name="graphic" color="#1989fa" size="26"/>
					</div>
					<div class="line2">修改绑定手机号码，用于接收短信验证码</div>
				</div>
				<div class="safeCenter-content-list-bottom" @click="toPush(2)">{{phoneStatus}}</div>
			</div>
			<div class="safeCenter-content-list">
				<div class="safeCenter-content-list-top">
					<div class="line1">
						<div class="left">邮箱验证</div>
                        <van-icon class="right" name="comment" color="#1989fa" size="26"/>
					</div>
					<div class="line2">绑定邮箱，用于接收账户相关信息服务</div>
				</div>
				<div class="safeCenter-content-list-bottom" @click="toPush(3)">{{mailStatus}}</div>
			</div>
      <div class="safeCenter-content-list">
        <div class="safeCenter-content-list-top">
          <div class="line1">
            <div class="left">支付密码</div>
            <van-icon class="right" name="lock" color="#1989fa" size="26"/>
          </div>
          <div class="line2">为提升您账号资金安全，涉及金额相关的操作均需要使用支付密码</div>
        </div>
        <div class="safeCenter-content-list-bottom" @click="toPush(4)">管理</div>
      </div>
		</div>

		<van-loading id='pageLoading' v-if='isLoading' type="spinner" size="40" color="#1989fa"/>
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top'
import {Toast} from 'vant'
export default {
	name: 'safeCenter',
	components: {
		HeaderTop,
	},
	data() {
		return {
            phoneStatus:'管理',
            mailStatus:'管理',
            phoneValue:'',
            mailValue:'',
            hasPhone:true,
            hasMail:true,
            isLoading:false,
		}
	},
    beforeRouteLeave (to, from, next) {
		this.$destroy(true)
		next()
	},
	mounted() {
        this.getInfo()
	},
	methods: {
        getInfo(){
            this.isLoading = true
            this.ServerAPI.postAPI(this.API.withdrawInfo, '', (success,data)=>{
                this.isLoading = false
				if(success){
					if(data.code === '0000'){
						if(data.data.phone === '' || data.data.phone === null){
                            this.phoneStatus = '绑定'
                            this.hasPhone = false
                        }else{
                            this.phoneValue = data.data.phone
                        }
                        if(!!data.data.email === false || data.data.email === '' || data.data.email === null){
                            this.mailStatus = '绑定'
                            this.hasMail = false
                        }else{
                             this.mailValue = data.data.email
                        }

					}
				}
			})
        },
		toPush(value){
			switch (value){
				case 1:this.$router.push('/accountPwdSet')
					break
				// case 2:this.$router.push('/bankCardSet')
				case 2:
                    if(this.hasPhone === true){
                        sessionStorage.setItem('userPhone',this.phoneValue)
                    }else{
                        sessionStorage.setItem('bindNew','1')
                    }
                    this.$router.push('/changePhone')
					break
				case 3:
                    // this.$router.push('/virtualCoinSet')
                    if(this.hasMail === true){
                        sessionStorage.setItem('userMail',this.mailValue)
                    }else{
                        sessionStorage.setItem('bindNewMail','1')
                    }
                    this.$router.push('/changeMail')
					break
        case 4:
          this.$router.push('/payPwdSet')
              break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.safeCenter-content {
	.safeCenter-content-title {
		width: 92%;
		height: 1.1rem;
		margin: .4rem auto .6rem;
		background: rgb(0,71,157);
		border-radius: .2rem;
		padding: 0 .3rem;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		.safeCenter-content-title-left {
			height: .4rem;
		}
		.safeCenter-content-title-right {
			width: 92%;
			margin-left: .3rem;
		}
	}
	.safeCenter-content-list {
		width: 92%;
		margin: .3rem auto 0;
		.safeCenter-content-list-top {
			padding: .2rem;
			height: 1.5rem;
			border: rgb(229,229,229) 1px solid;
			.line1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: .5rem;
				.left {
					color: rgb(50,50,50);
					font-size: .3rem;
					font-weight: bold;
				}

				.card {
					height: .4rem;
				}
				.virtual-coin {
					height: .45rem;
				}
			}
			.line2 {
				font-size: .26rem;
				color: rgb(254,121,33);
			}
		}
		.safeCenter-content-list-bottom {
			height: .6rem;
			font-size: .28rem;
			color: rgb(0,113,240);
			padding: .1rem .2rem;
			border: rgb(229,229,229) 1px solid;
			border-top: none;
			font-weight: bold;
		}
	}

}

</style>
